<style>
    #contract_list .fa-close {
        color: #FF5722;
        padding: 6px;
        cursor: pointer;
    }
</style>
<div class="layuimini-container">
    <form id="app-form" class="layui-form layuimini-form">
        <input type="hidden" name="update_time" value="{$row.update_time|default=''}">
        {if auth('tally.Custom/modify')}
        <div class="operate-bar">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit>
                {:lang('common.btn_save')}
            </button>
        </div>
        {/if}

        <div class="layui-form-item">
            <label class="layui-form-label">{:lang('custom.number')}</label>
            <div class="layui-input-block">
                <input type="text" name="number" class="layui-input" lay-verify="required" maxlength="20"
                       placeholder="{:lang('common.input')}{:lang('custom.number')}" value="{$row.number|default=''}">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">{:lang('custom.name')}</label>
            <div class="layui-input-block">
                <input type="text" name="name" class="layui-input" lay-verify="required"
                       placeholder="{:lang('common.input')}{:lang('custom.name')}" value="{$row.name|default=''}">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">{:lang('accounting.name')}</label>
            <div class="layui-input-block">
                <select name="accounting_id" lay-search lay-verify="required">
                    <option value="">{:lang("common.choose")}{:lang("accounting.name")}</option>
                    {foreach :getAccountingList() as $val}
                    <option value="{$val.id}" {if $val.id==$row.accounting_id}selected{/if}>{$val.name}</option>
                    {/foreach}
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">{:lang('common.estimate_time')}</label>
            <div class="layui-input-inline">
                <input type="text" name="estimate_time" class="layui-input" lay-verify="onlyNumber"
                       placeholder="{:lang('common.input')}{:lang('common.estimate_time')}"
                       value="{$row.estimate_time|default=''}">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label required">{:lang('common.status')}</label>
            <div class="layui-input-block">
                <select name="status" lay-verify="required" default-value="{$row.status|default=''}"
                        data-select-type="status">
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">{:lang('custom.contract_ids')}</label>
            <div class="layui-input-block">
                <span><a id="upload_contracts" class="layui-btn">
                    <i class="fa fa-upload"></i> {:lang('common.btn_upload')}</a></span>
                <div id="contract_list">
                    {foreach $contracts as $val}
                    <div class="item" data-id="{$val.id}">
                        <a target="_blank" href="{$val.url}">{$val.original_name}</a>
                        <i class="fa fa-close" onclick="removeItem(this)"></i>
                    </div>
                    {/foreach}
                </div>
            </div>
        </div>
    </form>
</div>
<script>
    layui.use(['myCommon'], function () {
        var $ = layui.jquery
            , upload = layui.upload
            , myCommon = layui.myCommon;

        window.removeItem = function (dom) {
            $(dom).closest('.item').remove();
        }

        upload.render({
            elem: '#upload_contracts'
            , url: myCommon.url('ajax/upload')
            , multiple: true
            , accept: 'file'
            , exts: 'jpg|png|gif|bmp|jpeg|pdf|xls|xlsx|doc|docx'
            , done: function (res) {
                if (res.code == 0) {
                    $('#contract_list').append('<div class="item" data-id="' + res.data.id + '">'
                        + '<a target="_blank" href="' + res.data.url + '">' + res.data.name + '</a>'
                        + '<i class="fa fa-close" onclick="removeItem(this)"></i></div>');
                }
            }
        })

        myCommon.listen(function (data) {
            let sb = []
            $('#contract_list').find('.item').each(function () {
                sb.push($(this).data('id'))
            })
            data['contract_ids'] = sb.join(',')

            return data
        });
    });
</script>
